<template>
    <div class="diary-column container" :style="{'width':width+'px'}">
        <div  v-for="i in diaryList" :key="i.id">
            <div class="title" >
                <span>{{i.title}}</span>
            </div>
            <div class="diary-nav" :class="{active1:i.isShow}">
                <ul>
                    <li  v-for="y in i.child" :key="y.id" @click="toggl(i.child,y.id,i.id,diaryList)" :class="y.select ? 'unactive active' : 'unactive' " >{{y.name}} <span></span></li>
                </ul>
                <Icon type="md-arrow-dropdown"  class="icon" @click="i.isShow =!i.isShow"/>
                <div style="clear: both"></div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</template>

<script>
    import Bus from '../../axios/bus.js'
    export default {
        name: "diaryColumn",
        props:['type','id','width'],

        data () {
            return {
                diaryList:[
                     {
                        id:1,
                        title:'项目',
                        isShow: false,
                        child:[
                            {id:1,name:'玻尿酸',num:'111',timeIndex:1,select:true},
                            {id:2,name:'皮肤',num:'111',timeIndex:2,select:false},
                            {id:3,name:'玻尿酸',num:'111',timeIndex:3,select:false},
                            {id:4,name:'玻尿酸',num:'111',timeIndex:4,select:false},
                            {id:5,name:'玻尿酸',num:'111',timeIndex:5,select:false},
                            {id:6,name:'玻尿酸',num:'111',timeIndex:6,select:false},
                            {id:7,name:'玻尿酸',num:'111',timeIndex:7,select:false},
                            {id:8,name:'玻尿酸',num:'111',timeIndex:8,select:false},
                            {id:9,name:'玻尿酸',num:'111',timeIndex:9,select:false},
                            {id:10,name:'玻尿酸',num:'111',timeIndex:9,select:false},
                            {id:11,name:'玻尿酸',num:'111',timeIndex:9,select:false},
                      ]
                    },
                     {
                        id:2,
                        title:'大陆',
                        isShow: false,
                        child:[]
                     },
                     {
                        id:3,
                        title:'海外',
                        isShow: false,
                        child:[
                            {id:1,name:'玻尿酸',num:'111',timeIndex:1,select:false},
                            {id:2,name:'皮肤',num:'111',timeIndex:2,select:false},
                            {id:3,name:'玻尿酸',num:'111',timeIndex:3,select:false},
                            {id:4,name:'玻尿酸',num:'111',timeIndex:4,select:false},
                            {id:5,name:'玻尿酸',num:'111',timeIndex:5,select:false},
                            {id:6,name:'玻尿酸',num:'111',timeIndex:6,select:false},
                            {id:7,name:'玻尿酸',num:'111',timeIndex:7,select:false},
                            {id:8,name:'玻尿酸',num:'111',timeIndex:8,select:false},
                            {id:9,name:'玻尿酸',num:'111',timeIndex:9,select:false},
                        ]},
                  ],
                group_id:0,
                place_id:0,
            }
        },
        created () {
            this.init()
            this.getinfo()

        },
        methods: {
            toggl (index,id,num,home) {
                let _this = this
                if(num===1){
                    index.forEach(function (i) {
                        i.select=false
                        if(i.id===id){
                            i.select=true;
                            _this.group_id=id
                            _this.getinfo()

                        }
                    })
                }
                if(num===2){
                    index.forEach(function (i) {
                        i.select=false
                        if(i.id===id){
                            i.select=true;
                            _this.place_id=id
                            _this.getinfo()
                        }
                    })
                    home[2].child.forEach(function (i) {
                        i.select = false
                    })
                 }
                if(num===3){
                    index.forEach(function (i) {
                        i.select=false
                        if(i.id===id){
                            i.select=true;
                            _this.place_id=id
                            _this.getinfo()
                        }
                    })
                    home[1].child.forEach(function (i) {
                        i.select = false

                    })
                }
            },
            init () {
                let  _this = this
                _this.$post('/api/common/getPlace',
                    {
                       pid:0,
                    },function (res) {

                        res.data.unshift({
                            name:"全部地区",
                            id:0
                        })
                        _this.diaryList[1].child = res.data
                        _this.diaryList[1].child.forEach(function (i) {
                            if(i.id===0){
                                _this.$set(i,'select', true);
                            }else {
                                _this.$set(i,'select', false);
                            }
                        })


                    },function (err,errmsg,errcode) {
                        _this.$message.error(errmsg);

                    }
                )

            },
            getinfo () {
                let  _this = this
                if(this.type == 2 ){
                    _this.$post('/api/Diary/DiaryList',
                        {
                            usergroup_id:1,
                            projectgroup_ids:_this.group_id,
                            place_id: _this.place_id
                        },function (res) {
                            let list = res.data

                            _this.$emit('childevent',list);
                        },function (err,errmsg) {
                            _this.$message.error(errmsg);
                        }
                    )

                }else {
                    _this.$post('/api/shop/getProjectList',
                        {
                            group_id:_this.group_id,
                            place_id: _this.place_id
                        },function (res) {
                            _this.$set(res.data,'length',res.data.count)
                            let list = Array.from(res.data);
                            list.forEach(function (i) {
                                _this.$set(i,'type',2);
                                // console.log(i)
                            })
                            // console.log(res.data)
                            _this.$emit('childevent',list);
                            // console.log(list)
                        },function (err,errmsg) {
                            _this.$message.error(errmsg);
                        }
                    )
                }


            }
        }
    }
</script>

<style scoped lang="less">
    .diary-column{
        position: relative;
        padding: 0;
        width: 1180px;
    }
    .diary-column>div{
        border-bottom: 1px solid #e0e0e0;
    }
    .diary-column>:last-child{
        border-bottom: none;
    }
      .diary-column{
          border: 1px solid #e0e0e0;
          .title{
              width: 71px;
              line-height: 52px;
              font-size: 14px;
              color: #333333;
              text-align: center;
              float: left;
              margin-right: 20px;
              span{
                  border-right:1px solid #e0e0e0 ;
                  padding: 0 21px 0 21px;
              }
          }
          .diary-nav{
              float: left;
              width: 89%;
              overflow: hidden;
              height: 53px;
          }
          .active1{
              height: auto !important;
          }
          ul{

              .active{
                  background-color:  #FE5371;
                  color: white !important;
                  .active:hover{
                      color: white !important;
                      cursor:pointer
                  }
                  span{
                      color: white !important;
                  }
              }
              .unactive{
                  margin-top: 14px;
                  float: left;
                  height: 30px;
                  line-height: 30px;
                  width: 120px;
                  text-align: center;
                  margin-left: 10px;
                  border-radius: 5px;
                  span{
                      color: #999999;
                  }
              }
              .unactive:hover{
                  color: #FE5371;
                  cursor:pointer
              }
          }
          .icon{
              font-size: 20px;
              float: right;
              margin-top:20px;
              margin-right: -6px;
              position: absolute;
          }
      }
</style>